import React from 'react';
import '../css/Todo.css';
import {connect} from 'react-redux';

class Todo extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        // console.log(this.props.todos);
        return(
            <div className="todo">

                <div className="todo-input">
                    <input type="text" ref="todoInput" placeholder="添加todo" />
                    <button onClick={()=>{
                        // 获取输入框的内容
                        var value = this.refs.todoInput.value;
                        // 为空判断
                        if(value.length === 0){
                            alert("添加内容不能为空！");
                            return;
                        }
                        // 组装todo对象
                        var todo = {
                            context:value,
                            status:"PENDDING"
                        }
                        this.props.addTodo({
                            type:"ADDTODO",
                            todo:todo
                        });
                    }}>添加todo</button>
                </div>
                <div className="todo-container">
                    {
                        this.props.todos.map((element,index)=>{
                            return <div key={index} className="todo-container-item">
                                <div className="todo-container-item-left">
                                    <input type="checkbox" 
                                    checked={element.status==="PENDDING"?false:true}
                                    onChange={(event)=>{
                                        var checked = event.target.checked;
                                        this.props.changeStatus({
                                            type:"CHANGESTATUS",
                                            todo:element,
                                            checked:checked
                                        })
                                    }}/>

                                    {element.context}

                                </div>
                                <button onClick={()=>{
                                    this.props.deleteTodo({
                                        type:"delete",
                                        todo:element
                                    })
                                }}>删除</button>
                            </div>
                        })
                    }
                </div>
                <div className="todo-tab">
                    <button onClick={()=>{
                        this.props.all({
                            type:"all"
                        })
                    }}>全部</button>
                    <button onClick={()=>{
                        this.props.pendding({
                            type:"pendding"
                        })
                    }}>未完成</button>
                    <button onClick={()=>{
                        this.props.finished({
                            type:"finished"
                        })
                    }}>已完成</button>
                    <button>全部删除</button>
                </div>

            </div> 
        );
    }
}

// 将组件的状态 从 redux 读取 并且放到组件props属性中
function mapStateToProps(rootReducer){
    console.log(rootReducer.todoReducer.todos)
    return{
        todos:rootReducer.todoReducer.showTodo
    }
}
// 将提交action方法合并到组件props中
function mapActionToProps(dispatch){
    return{
        addTodo:(action)=>{dispatch(action)},
        changeStatus:(action)=>{dispatch(action)},
        deleteTodo:(action)=>{dispatch(action)},
        all:(action)=>{dispatch(action)},
        pendding:(action)=>{dispatch(action)},
        finished:(action)=>{dispatch(action)},
    }
}

export default connect(mapStateToProps,mapActionToProps)(Todo);